<template>
	<view>
		<view class="comment-group">
			<view class="form-group1">
				<label>评论人：</label>
				<input type="text" name="people" v-model= "user" disabled="disabled"/>
			</view>
			<view class="form-group">
				<label>评论内容：</label>
				<textarea class="form-control" name="comment" v-model= "content"></textarea>
			</view>
				<button class="btn" @click="postComment()">发表评论</button>
		</view>
		<!--评论列表-->
		<view class="comment-group">
			<view class="list-group-item" v-for="item in data" :key="item._id">
			    <view class="items">评论人：{{item.user}}</view>
			    <view class="items" >评论：{{item.comment}}</view>
				<view class="items" >评论时间：{{item.create_time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				data:[],
				user:'',
				content:'',
			}
		},
		onShow() {
			this.onshow_a();
		},
		methods:{
			onshow_a(){
				var that = this;
				uni.getStorage({
				    key: 'username',
				    success: function (res) {
						if(res.data){
							that.user = res.data;
						}else{
							uni.showModal({
								content:'当前未登录请您登录',
								success: function(res){
									if (res.confirm){
										that.$util.navigateTo('../login/login');
									}
								}
							})
						}
				    },
					fail: (err) => {
						console.log(err);
						uni.showModal({
							content:'当前未登录请您登录',
							success: function(res){
								if (res.confirm){
									that.$util.navigateTo('../login/login');
								}
							}
						})
					},
					complete: (c) => {
					}
				});
				uniCloud.callFunction({
					name: 'comment_read',
					success: (res) => {
						let {data} = res.result;
						this.data = data;
						console.log(res.result);
						uni.showToast({
							title: '请求成功',
						})
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							title: '请求失败，请稍后重试',
							icon: 'none'
						})
					},
					complete: (c) => {
					}
				})
			},
			postComment(){
				var that =this;
				uni.showLoading({
					title: '评论中...'
				})
				uniCloud.callFunction({
				    name: 'comment', 
				    data: {
						user:this.user,
						comment:this.content
					}, 
				    success: (res) => {
						uni.hideLoading();
						console.log(res.result);
						uni.showToast({
							title: '评论成功',
						})
						that.onshow_a();
				    },
				    fail: (err) => {
						console.log(err);
						uni.hideLoading();
						uni.showToast({
							title: '评论失败，请稍后重试',
							icon: 'none'
						})
					},
				    complete: (c) => {
				    }
				})
			}
		}
	}
</script>

<style>
	page {
		background: #ebebeb;
	}
	.comment-group{
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		justify-content: center;
		background: #ffffff;
		border-radius: 20upx;
		margin: 15upx;
		padding: 10upx;
	}
	.form-group1{
		display: flex;
		flex-direction: row;
		width: 680upx;
		margin: auto;
		padding: 10upx;
	}
	.form-group{
		display: flex;
		flex-direction: column;
		width: 680upx;
		margin: auto;
		padding: 10upx;
	}
	.form-control{
		width: 650upx;
		height: 80upx;
		margin-top: 15upx;
	}
	label{
		font-size: 18px;
		color: #0055ff;
	}
	.btn{
			font-size:24rpx;
			text-align:center;
			color:white;
			background-color:#0055ff;
			height: 60rpx;
			line-height: 60rpx;
			width:180rpx;
			
	}
	.list-group-item{
		flex-direction: column;
		font-size: 15px;
		line-height: 60upx;
		flex-wrap: wrap;
		height: auto;
		border-bottom: #cccccc 2upx solid;
	}
	.items {
		float: left;
		overflow: hidden;
		background: #efefef;
		margin: 20upx 20upx 0upx 20upx;
		padding: 5upx 15upx 5upx 15upx;
		border-radius: 20upx;
	}
</style>
